<template>
  <div>
    <el-dialog
      width="1200px"
      :title="$t('统计')"
      :visible.sync="isShow"
      :close-on-click-modal="false"
    >
      <div class="head_options">
        <h3 class="head font14 text_black">{{ $t("租借率") }}</h3>
        <div class="head_btn">
          <span>本月<span v-if="rent>10" style="color: red;" >{{ rent }}%</span><span v-else style="color: green;" >{{ rent }}%</span></span>

          <span style="margin-left: 20px;">本周<span v-if="rentweek>10">{{ rentweek }}%</span><span v-else style="color: green;" >{{ rentweek }}%</span></span>
          
          <span style="margin-left: 20px;">本日<span v-if="rentday>10">{{ rentday }}%</span><span v-else style="color: green;" >{{ rentday }}%</span></span>
        
        </div>






        <h3 class="head font14 text_black">{{ $t("时间筛选") }}</h3>
        <div class="head_btn">
          <el-button
            type="primary"
            :plain="current != 'yesterday'"
            @click="changeTime('yesterday')"
          >{{$t('昨天')}}</el-button>
          <el-button
            type="primary"
            :plain="current != 'today'"
            @click="changeTime('today')"
          >{{$t('今天')}}</el-button>
          <el-button
            type="primary"
            :plain="current != 'lastWeek'"
            @click="changeTime('lastWeek')"
          >{{$t('上周')}}</el-button>
          <el-button
            type="primary"
            :plain="current != 'week'"
            @click="changeTime('week')"
          >{{$t('本周')}}</el-button>
          <el-button
            type="primary"
            :plain="current != 'lastMonth'"
            @click="changeTime('lastMonth')"
          >{{$t('上月')}}</el-button>
          <el-button
            type="primary"
            :plain="current != 'month'"
            @click="changeTime('month')"
          >{{$t('本月')}}</el-button>
          <el-button
            type="primary"
            :plain="current != 'lastYear'"
            @click="changeTime('lastYear')"
          >{{$t('去年')}}</el-button>
          <el-button
            type="primary"
            :plain="current != 'year'"
            @click="changeTime('year')"
          >{{$t('今年')}}</el-button>
          <el-button
            type="primary"
            :plain="current != 'write'"
            @click="changeTime('write')"
          >{{$t('自定义')}}</el-button>
        </div>

        <div v-show="current == 'write'" style="margin-bottom: 20px;">
          <el-date-picker
            v-model="dates"
            style="margin-right: 20px;"
            type="daterange"
            value-format="yyyy-MM-dd"
            :range-separator="$t('至')"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')"
          ></el-date-picker>
          <el-button type="primary" :disabled="!dates" @click="getData">{{$t('提交')}}</el-button>
        </div>
      </div>
      <!--  -->
      <div class="chart_box">
        <div class="chart_item">
          <div id="order_amount" style="height:400px;"></div>
          <div class="u-f u-f-ac total">
            <span class="font14 text_blue mr2"> {{ $t("订单总金额") }}：{{total.total_amount_sum}} </span>
            <span class="font14 text_green mr2"> {{ $t("订单总实收金额") }}：{{total.total_pay_amount_sum}} </span>
            <span class="font14 text_blue mr2"> {{ $t("充氧宝总金额") }}：{{total.battery_amount_sum}} </span>
            <span class="font14 text_green mr2"> {{ $t("充氧宝实收金额") }}：{{total.battery_pay_amount_sum}} </span>
            <!-- <span class="font14 text_warning mr2"> {{ $t("密码线总金额") }}：{{total.wired_amount_sum}} </span> -->
          </div>
        </div>

        <div class="chart_item">
          <div id="order_brokerage" style="height:400px;"></div>
          <div class="u-f u-f-ac total">
            <span class="font14 text_blue mr2"> {{ $t("总分成") }}：{{total.brokerage_amount_sum}} </span>
            <span class="font14 text_green mr2"> {{ $t("结算分成") }}：{{total.brokerage_settle_sum}} </span>
            <!-- <span class="font14 text_warning mr2"> {{ $t("总取消分成") }}：{{total.brokerage_cancel_sum}} </span> -->
          </div>
        </div>

        <div class="chart_item">
          <div id="order_num" style="height:400px;"></div>
          <div class="u-f u-f-ac total">
            <span class="font14 text_blue mr2"> {{ $t("总订单数") }}：{{total.total_num_sum}} </span>
            <span class="font14 text_green mr2"> {{ $t("有效总订单数") }}：{{total.total_pay_num_sum}} </span>
            <span class="font14 text_blue mr2"> {{ $t("充氧宝总订单数") }}：{{total.battery_num_sum}} </span>
            <span class="font14 text_green mr2"> {{ $t("充氧宝付款订单数") }}：{{total.battery_pay_num_sum}} </span>
            <!-- <span class="font14 text_warning mr2"> {{ $t("密码线订单数") }}：{{total.wired_num_sum}} </span> -->
          </div>
        </div>

        <div class="chart_item">
          <div id="order_refund" style="height:400px;"></div>
          <div class="u-f u-f-ac total">
            <span class="font14 text_blue mr2"> {{ $t("充氧宝退款") }}：{{total.battery_refund_sum}} </span>
            <span class="font14 text_warning mr2"> {{ $t("充氧宝实收退款") }}：{{total.battery_pay_refund_sum}} </span>
            <!-- <span class="font14 text_danger mr2"> {{ $t("密码线退款") }}：{{total.wired_refund_sum}} </span> -->
          </div>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
export default {
  name: "agentStat",
  data() {
    return {
      isShow: false,
      id: "",
      current: "month",
      dates: "",
      total: {},
      battery_amount: [],
      battery_num: [],
      battery_pay_amount: [],
      battery_pay_num: [],
      battery_pay_refund: [],
      battery_refund: [],
      brokerage_amount: [],
      brokerage_cancel: [],
      brokerage_pay_cancel: [],
      brokerage_settle: [],
      day: [],
      total_pay_amount: [],
      total_amount: [],
      total_num: [],
      total_pay_num: [],
      wired_amount: [],
      wired_num: [],
      wired_refund: []
    };
  },
  methods: {
    show(id) {
      this.id = id;
      this.isShow = true;
      this.dates = util.getDate("month");
      setTimeout(() => {
        this.getData();
      }, 150);
    },
    getData() {
      util
        .$http("/stat/agency", {
          id: this.id,
          start: this.dates[0] || "",
          end: this.dates[1] || ""
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.battery_amount = res.data.battery_amount;
            this.battery_num = res.data.battery_num;
            this.battery_pay_amount = res.data.battery_pay_amount;
            this.battery_pay_num = res.data.battery_pay_num;
            this.battery_pay_refund = res.data.battery_pay_refund;
            this.battery_refund = res.data.battery_refund;
            this.brokerage_amount = res.data.brokerage_amount;
            this.brokerage_cancel = res.data.brokerage_cancel;
            this.brokerage_pay_cancel = res.data.brokerage_pay_cancel;
            this.brokerage_settle = res.data.brokerage_settle;
            this.day = res.data.day;
            this.total_pay_amount = res.data.total_pay_amount;
            this.total_amount = res.data.total_amount;
            this.total_num = res.data.total_num;
            this.total_pay_num = res.data.total_pay_num;
            this.wired_amount = res.data.wired_amount;
            this.wired_num = res.data.wired_num;
            this.wired_refund = res.data.wired_refund;
            this.rent = res.data.rent;
            this.rentday = res.data.rentday;
            this.rentweek = res.data.rentweek;
            this.orderAmount();
            this.orderNum();
            this.orderBrokerage()
            this.orderRefund()
          }
        });
    },
    changeTime(type) {
      this.current = type;
      if (type == "write") {
        this.dates = "";
      } else {
        this.dates = util.getDate(type);
        this.getData();
      }
    },
    orderAmount() {
      let myChart = this.$echarts.init(document.getElementById("order_amount"));
      let option = {
        title: {
          text: this.$t("订单金额")
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: [
            this.$t("订单总金额"),
            this.$t("订单总实收金额"),
            this.$t("充氧宝总金额"),
            this.$t("充氧宝实收金额"),
            // this.$t("密码线总金额")
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.day
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: this.$t("订单总金额"),
            type: "line",
            areaStyle: {},
            data: this.total_amount
          },
          {
            name: this.$t("订单总实收金额"),
            type: "line",
            areaStyle: {},
            data: this.total_pay_amount
          },
          {
            name: this.$t("充氧宝总金额"),
            type: "line",
            areaStyle: {},
            data: this.battery_amount
          },
          {
            name: this.$t("充氧宝实收金额"),
            type: "line",
            areaStyle: {},
            data: this.battery_pay_amount
          }
          // {
          //   name: this.$t("密码线总金额"),
          //   type: "line",
          //   areaStyle: {},
          //   data: this.wired_amount
          // }
        ]
      };
      myChart.setOption(option);
    },
    orderNum() {
      let myChart = this.$echarts.init(document.getElementById("order_num"));
      let option = {
        title: {
          text: this.$t("订单数量")
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: [
            this.$t("总订单数"),
            this.$t("有效总订单数"),
            this.$t("充氧宝总订单数"),
            this.$t("充氧宝付款订单数"),
            // this.$t("密码线订单数")
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.day
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: this.$t("总订单数"),
            type: "line",
            areaStyle: {},
            data: this.total_num
          },
          {
            name: this.$t("有效总订单数"),
            type: "line",
            areaStyle: {},
            data: this.total_pay_num
          },
          {
            name: this.$t("充氧宝总订单数"),
            type: "line",
            areaStyle: {},
            data: this.battery_num
          },
          {
            name: this.$t("充氧宝付款订单数"),
            type: "line",
            areaStyle: {},
            data: this.battery_pay_num
          }
          // {
          //   name: this.$t("密码线订单数"),
          //   type: "line",
          //   areaStyle: {},
          //   data: this.wired_num
          // }
        ]
      };
      myChart.setOption(option);
    },
    orderBrokerage() {
      let myChart = this.$echarts.init(document.getElementById("order_brokerage"));
      let option = {
        title: {
          text: this.$t("订单分成")
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: [
            this.$t("总分成"),
            this.$t("结算分成"),
            this.$t("总取消分成"),
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.day
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: this.$t("总分成"),
            type: "line",
            areaStyle: {},
            data: this.brokerage_amount
          },
          {
            name: this.$t("结算分成"),
            type: "line",
            areaStyle: {},
            data: this.brokerage_settle
          },
          {
            name: this.$t("总取消分成"),
            type: "line",
            areaStyle: {},
            data: this.brokerage_cancel
          },
        ]
      };
      myChart.setOption(option);
    },
    orderRefund() {
      let myChart = this.$echarts.init(document.getElementById("order_refund"));
      let option = {
        title: {
          text: this.$t("订单退款")
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: [
            this.$t("充氧宝退款"),
            this.$t("充氧宝实收退款")
            // this.$t("密码线退款")
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.day
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: this.$t("充氧宝退款"),
            type: "line",
            areaStyle: {},
            data: this.battery_refund
          },
          {
            name: this.$t("充氧宝实收退款"),
            type: "line",
            areaStyle: {},
            data: this.battery_pay_refund
          },
          // {
          //   name: this.$t("密码线退款"),
          //   type: "line",
          //   areaStyle: {},
          //   data: this.wired_refund
          // },
        ]
      };
      myChart.setOption(option);
    },
  }
};
</script>

<style scoped>
.head_options {
  margin-top: -30px;
  padding-left: 20px;
  margin-bottom: 40px;
}
.head_options .head_btn {
  margin-bottom: 20px;
}
.head_options .head {
  border-left: 4px solid #409eff;
  padding-left: 10px;
}
.chart_box {
  padding: 0 20px;
}
.chart_box .chart_item {
  margin-bottom: 40px;
}
.chart_box .chart_item .total{
  padding-left: 60px;
  margin-top: 30px;
}
.chart_box .chart_item .mr2 {
  margin-right: 20px;
}
</style>
